<template>
    <div>
        <el-form ref="form" :model="form" label-position="right" size="mini" label-width="0px" :rules="rules">
            <el-form-item prop="resourceType">
                <div class="box">
                    <p><strong>网络评估：</strong>经检测文件大小约为{{fileSize.toFixed(2)}}MB，数据大小约为{{fileSize.toFixed(2)}}MB，预计需要带宽>100Mbps，传输时间10秒
                    </p>
                </div>
                <div class="solutions-list">
                    <el-row :gutter="20">
                        <el-col :span="8" v-for="(item,index) in solutionList" :key="index">
                            <div class="solutions-box" :class="{'is-checked':get(form.selectId,'name')===item.name}"
                                 @click="onSelect(item)">
                                <div class="name"><strong>方案{{index+1}}：</strong>{{item.name}}</div>
                                <div>
                                    <p>空闲算力：{{item.power}}</p>
                                    <p>需要算力：{{item.power}}</p>
                                    <p>网络带宽：{{item.bandwidth}}</p>
                                    <p>预估时长：{{item.time}}</p>
                                    <p>预计费用：{{item.price}}</p>
                                </div>
                            </div>
                        </el-col>
                    </el-row>

                </div>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
  import io from '@/module/io'
  import _ from 'lodash'
  import { provideList } from './config'
  export default {
    props: {
      processDefinitionCode: String,
      projectCode: String,
      taskInfo: Object
    },
    components: {
    },
    data () {
      return {
        provideList,
        rules: [],
        form: {
          selectId: ''
        },
        fileSize: 0
      }
    },
    computed: {
      solutionList () {
        let centerNode = _.get(this.taskInfo, 'centerNode', 'cs')
        let node = this.provideList.find(e => e.value === centerNode)
        return _.get(node, 'solutionList', [])
      }
    },
    created () {
      if (this.solutionList.length === 1) {
        this.form.selectId = this.solutionList[0]
      }
      this.getSize()
    },
    methods: {
      onSelect (item) {
        this.form.selectId = item
      },
      getSize () {
        io.get(`projects/${this.projectCode}/process-definition/${this.processDefinitionCode}/resourceList`).then(res => {
          if (res.code === 0) {
            let fileSize = res.data.totalSize
            this.fileSize = fileSize / 1024
          }
        })
      },
      validate () {
        return new Promise((resolve, reject) => {
          if (this.form.selectId) {
            return resolve(true)
          } else {
            this.$message.warning('请选择一个方案')
            return reject(true)
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
.box {
    padding: 10px;
    background: rgba(51, 49, 126, 0.1);
    border-radius: 8px;
    font-size: 14px;
    color: #33317e;
    line-height: 20px;
    margin-bottom: 20px;
    p {
        margin-bottom: 0;
    }
}

.solutions-list .solutions-box {
    padding: 10px;
    background: rgba(211, 210, 253, 0.02);
    border: 1px solid rgba(51, 49, 126, 0.2);
    border-radius: 8px;
    font-size: 12px;
    color: #333333;
    transition: background 0.3s ease;
    cursor: pointer;
    .name {
        margin-bottom: 10px;
        font-size: 14px;
        font-weight: normal;
    }
    p {
        margin: 0;
        line-height: 20px;
    }
    &.is-checked {
        background: linear-gradient(180deg, rgba(51, 49, 126, 0.8), rgba(69, 17, 109, 0.8) 100%);
        border: 1.5px solid #33317e;
        border-radius: 4px;
        box-shadow: 2px 2px 10px 3px rgba(51, 49, 126, 0.6);
        backdrop-filter: blur(2px);
        color: #ffffff;
        position: relative;
        &::after {
            position: absolute;
            content: ' ';
            right: 0;
            bottom: 0;
            width: 30px;
            height: 34px;
            background: url(./images/checked.png) no-repeat;
        }
    }
}
</style>
